<template>
	<view>
		<view class="data-box">
			<view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles"></text> 行车登记
				</view>
			</view>
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<u--form
						class="from-card"
						labelPosition="left"
						labelWidth="80"
						:model="info"
						:rules="rules1"
						ref="form1">
							<u-form-item
							label="车牌号"
							prop="carNum"
							required
							@click="pickShow = true;columns = carNumbers;pickField = 'carId';pickFieldName='carNum'"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								v-model="info.carNum"
								placeholder="请选择"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item
							label="行车日期"
							prop="useTime"
							required
							@click="dateShow = true;dateField = 'useTime'"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								placeholder="请选择"
								v-model="info.useTime"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item
							label="时间段"
							prop="timeSlot"
							required
							borderBottom>
								<u-radio-group
								v-model="info.timeSlot"
								iconPlacement="left"
								shape="square">
									<u-radio
									:customStyle="{marginLeft: '40rpx'}"
									v-for="(item, index) in timeSlot"
									:key="index"
									:label="item.name"
									:name="item.name"
									@change="radioChange">
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item label="驾驶人" prop="userName" required>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.userName"
								placeholder="请输入"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<!-- <u-form-item label="出发地" prop="cfPlace" required>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.cfPlace"
								placeholder="正在定位中..."
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item> -->
							<u-form-item label="目的地" prop="destination" required>
								<u--input
								v-model="info.destination"
								placeholder="请输入"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="事由" prop="thing">
								<u--textarea
								v-model="info.thing"
								placeholder="请输入内容" >
								</u--textarea>
							</u-form-item>
						</u--form>
					</view>
				</view>
			</view>
		</view>
		
		<view class="data-box">
			<view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles"></text> 出车检查
				</view>
			</view>
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<u--form class="from-card" labelPosition="left" labelWidth="100" :model="info" :rules="rules2" ref="form2">
							<u-form-item label="油量" prop="oilCondition" required borderBottom>
								<u-radio-group
								v-model="info.oilCondition"
								iconPlacement="left"
								shape="square">
									<u-radio
									:customStyle="{marginLeft: '40rpx'}"
									v-for="(item, index) in oils"
									:key="index"
									:label="item.name"
									:name="item.name"
									@change="radioChange">
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item label="整洁度" prop="cleanliness" required borderBottom>
								<u-radio-group
								v-model="info.cleanliness"
								iconPlacement="left"
								shape="square">
									<u-radio
									:customStyle="{marginLeft: '40rpx'}"
									v-for="(item, index) in cleanliness"
									:key="index"
									:label="item.name"
									:name="item.name"
									@change="radioChange">
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item label="车况是否正常" prop="carCondition" required borderBottom>
								<u-radio-group
								v-model="info.carCondition"
								iconPlacement="left"
								shape="square">
									<u-radio
									:customStyle="{marginLeft: '40rpx'}"
									v-for="(item, index) in whether"
									:key="index"
									:label="item.name"
									:name="item.name"
									@change="radioChange">
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item label="车辆异常状况" prop="abnormalCondition" borderBottom>
								<u--textarea
								v-model="info.abnormalCondition"
								placeholder="请输入">
								</u--textarea>
							</u-form-item>
							<u-form-item label="其他不适合行车情况" prop="otherCondition">
								<u--textarea
								v-model="info.otherCondition"
								placeholder="请输入">
								</u--textarea>
							</u-form-item>
						</u--form>
					</view>
				</view>
			</view>
		</view>
		
		<view class="data-box">
			<view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles"></text> 流程
				</view>
			</view>
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<u--form
						class="from-card"
						labelPosition="top"
						labelWidth="180">
							<u-form-item :label="'审批人('+(spList.length>0?spList.length+'人依次审批':'请选择审批人')+')'">
								<view class="card-plus-t user-t" style="">
									<view class="pers-list">
										<view class="per-list per-all"  v-if="spList.length>showLength"
											@click="gotoPage('/components/choose-user/addMore?type=审批人&chooseUsers='+encodeURIComponent(JSON.stringify(spList)))">
											<view class="pers-pic">
												<u-avatar icon="account" shape="square" size="35" bgColor="#0087FC">
													<u-icon name="account" color="#ffffff" size="50rpx"></u-icon>
												</u-avatar>
											</view>
											<text class="pers-name all-users">查看全部</text>
											<view class="pers-icon">
												<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view>
										<view class="per-list" v-for='(it,i) in spList.length>showLength?spList.slice(-showLength):spList' :key='i'>
											<view class="pers-pic">
												<u-avatar
													v-if="it.avatar"
													shape="square"
													size="35"
													:src="it.avatar">
												</u-avatar>
												<u-avatar
													v-else
													:text="it.userName.slice(1)"
													:fontSize="it.userName.length > 2?12:15"
													shape="square"
													size="35"
													bgColor="#0087FC">
												</u-avatar>
												<view class="pers-close" style="" @click="closeUser(i,'spList')">
													<u-icon name="close" color="#ffffff" size="18rpx"
														customStyle="line-height: 20rpx;" bold></u-icon>
												</view>
											</view>
											<view class="image_bottom_text">
												<text class="pers-name">{{it.userName}}</text>
											</view>
											<view class="pers-icon">
												<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view>
									</view>
									<view class="card-plus-f plus-style"
										@click="gotoPage('/components/choose-user/choosePer?type='+'审批人&chooseUsers='+encodeURIComponent(JSON.stringify(spList)))">
										<uni-text class="span-style" v-if="spList.length<1">
											<span>*</span>
										</uni-text>
										<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
									</view>
								</view>
							</u-form-item>
							<u-form-item :label="'抄送人('+(csList.length>0?'抄送'+csList.length+'人':'请选择抄送人')+')'">
								<view class="card-plus-t cc-t">
									<view class="per-list per-all"  v-if="csList.length>showLength"
										@click="gotoPage('/components/choose-user/addMore?type=抄送人&chooseUsers='+encodeURIComponent(JSON.stringify(csList)))">
										<view class="pers-pic">
											<u-avatar icon="account" shape="square" size="35" bgColor="#0087FC">
												<u-icon name="account" color="#ffffff" size="50rpx"></u-icon>
											</u-avatar>
										</view>
										<text class="pers-name all-users">查看全部</text>
										<view class="pers-icon">
											<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
										</view>
									</view>
									<view class="pers-list">
										<view class="per-list" v-for='(it,i) in csList.length>showLength?csList.slice(-showLength):csList' :key='i'>
											<view class="pers-pic">
												<u-avatar
													v-if="it.avatar"
													shape="square"
													size="35"
													:src="it.avatar">
												</u-avatar>
												<u-avatar
													v-else
													:text="it.userName.slice(1)"
													:fontSize="it.userName.length > 2?12:15"
													shape="square"
													size="35"
													bgColor="#0087FC">
												</u-avatar>
												<view class="pers-close" style="" @click="closeUser(i,'csList')">
													<u-icon name="close" color="#ffffff" size="18rpx"
														customStyle="line-height: 20rpx;" bold></u-icon>
												</view>
											</view>
											<view class="image_bottom_text">
												<text class="pers-name">{{it.userName}}</text>
											</view>
											<!-- <text class="pers-name">{{it.userName}}</text> -->
											<view class="pers-icon">
												<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view> 
									</view>
									<view class="card-plus-s plus-style"
										@click="gotoPage('/components/choose-user/choosePer?type=抄送人&chooseUsers='+encodeURIComponent(JSON.stringify(csList)))">
										<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
									</view>
								</view>
							</u-form-item>
						</u--form>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit-button">
			<view class="submit-block" @click="submit()">
				保存
			</view>
		</view>
		
		<u-picker
			:immediateChange="true"
			:show="pickShow"
			:columns="columns"
			@confirm="confirmPick"
			keyName="name"
			@cancel="pickShow = false">
		</u-picker>
		
		<!-- <u-datetime-picker
			:show="dateShow"
			v-model="dateValue"
			@cancel="dateShow = false"
			@confirm="confirmDate"
			mode="date">
		</u-datetime-picker> -->
		
		<u-calendar
			:show="dateShow"
			:maxDate="String(new Date())"
			:minDate="minDate"
			monthNum="7"
			:closeOnClickOverlay="true"
			@close="dateShow = false"
			@confirm="confirmDate">
		</u-calendar>
	</view>
</template>

<script>
	import env from '@/env.js'
	import amap from '@/static/js/amap-wx.130.js';
	import { getCarNums } from '@/api/car.js'
	import { add } from '@/api/journal.js'
	import { strFormatMinutes } from '@/utils/format.js'
	import { listByNames } from '@/api/user.js'
	export default {
		data() {
			return {
				amapPlugin: null,
				gaodekey: env.gaodekey,
				minDate:new Date() - 6*30*24*60*60*1000,
				buttonDisabled:false,
				postNames:[],
				timer:null,//定时器
				frontImage:[],
				info:{
					carId:'',
					carNum:'',
					useTime:'',
					timeSlot:'',
					// useTime: strFormatMinutes(Number(new Date())),
					userName:'',
					oilCondition:'',
					cleanliness:'',
					carCondition:'',
					abnormalCondition:'',
					otherCondition:'',
					cfPlace:'',
					destination:'',
					spList:[],
					csList:[],
				},
				rules1:{
					'carNum': {
						required: true,
						message: '请选择车牌号',
						trigger: ['blur', 'change']
					},
					'useTime': {
						type: 'string',
						required: true,
						message: '行车日期不能为空',
						trigger: ['blur', 'change']
					},
					'timeSlot':{
						type: 'string',
						required: true,
						message: '时间段不能为空',
						trigger: ['blur', 'change']
					},
					'userName': {
						type: 'string',
						required: true,
						message: '驾驶人不能为空',
						trigger: ['blur', 'change']
					},
					// 'cfPlace': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '出发地不能为空',
					// 	trigger: ['blur', 'change']
					// },
					'destination': {
						type: 'string',
						required: true,
						message: '请填写目的地',
						trigger: ['blur', 'change']
					},
					// 'thing':{
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写事由',
					// 	trigger: ['blur', 'change']
					// },
				},
				rules2:{
					'oilCondition': {
						type: 'string',
						required: true,
						message: '请选择油量',
						trigger: ['blur', 'change']
					},
					'cleanliness': {
						type: 'string',
						required: true,
						message: '请选择整洁度',
						trigger: ['blur', 'change']
					},
					'carCondition': {
						type: 'string',
						required: true,
						message: '请选择车况是否正常',
						trigger: ['blur', 'change']
					},
				},
				timeSlot:[
					{ name:'上午' },
					{ name:'下午' },
					{ name:'全天' },
				],
				oils:[
					{ name:'无需加油' },
					{ name:'需加油' },
				],
				cleanliness:[
					{ name:'整洁' },
					{ name:'不整洁' },
				],
				whether:[
					{ name:'是' },
					{ name:'否' },
				],
				carNumbers:[],
				pickShow:false,
				columns:[],
				pickField:'',
				pickFieldName:'',
				dateShow:false,
				dateValue: Number(new Date()),
				dateField:'',
				spList: [],
				csList: [],
				showLength:4,
			}
		},
		onLoad() {
			let loginInfo = uni.getStorageSync("loginInfo")
			this.info.userName = loginInfo.user.userName
			this.postNames = loginInfo.postNames
			// this.amapPlugin = new amap.AMapWX({
			// 	key: this.gaodekey
			// });
			// this.getAddress()
			this.getCarNumList()
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules1)
			this.$refs.form2.setRules(this.rules2)
		},
		onShow() {
			// clearInterval(this.timer)
			// this.timer = setInterval(()=>{
			//     this.getAddress();
			// },60000);
		},
		onUnload(){
		    // clearInterval(this.timer)
		},
		methods: {
			getAddress(){
				const _this = this;
				// #ifdef APP-PLUS
				uni.getLocation({
				    type: 'gcj02',
					geocode: true,
					isHighAccuracy:true,
				    success:(res) => {
						_this.info.cfPlace = res.address.city+res.address.district+res.address.poiName;
				    }
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.showLoading({
					title: '获取信息中'
				});
				// 成功获取位置
				_this.amapPlugin.getRegeo({
					success: (data) => {
						// _this.address 可根据自己的实际情况修改
						_this.info.cfPlace = `${data[0].desc}`;
						uni.hideLoading();
					},
					// 获取位置失败
					fail: (err) => {
						uni.showToast({
							title: "获取位置失败，请重启小程序",
							icon: "error"
						})
					}
				});
				// #endif
			},
			async getCarNumList(){
				const { data } = await getCarNums();
				if(data.code == 200){
					this.carNumbers = [data.data]
				}
			},
			async addJournal(){
				const { data } = await add(this.info);
				if(data.code == 200){
					uni.showToast({ title: '提交成功', icon: 'none' })
					// let pages = getCurrentPages();
					// let prevPage = pages[pages.length - 2];
					setTimeout(() => {
						// prevPage.$vm.getTabIndex(0);
						uni.navigateBack()
					}, 500)
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
			submit(){
				if(this.buttonDisabled){
					uni.$u.toast('请勿重复提交')
					return
				}
				this.$refs.form1.validate().then(res => {
					this.$refs.form2.validate().then(res => {
						this.buttonDisabled = true
						this.info.spList = this.spList
						this.info.csList = this.csList
						this.addJournal()
					}).catch(errors => {
						uni.$u.toast('请将信息填写完整')
					})
				}).catch(errors => {
					uni.$u.toast('请将信息填写完整')
				})
			},
			radioChange(){
				
			},
			confirmPick(e){
				this.pickShow = false
				this.info[this.pickField] = e.value[0].id
				this.info[this.pickFieldName] = e.value[0].name
				if(e.value[0].auditPersonName){
					this.getUsersByNames([e.value[0].auditPersonName],'spList')
				}
			},
			confirmDate(e){
				// this.info[this.dateField] = strFormatMinutes(e.value)
				this.info[this.dateField] = e[0]
				this.dateShow = false
			},
			// // 审批人
			setUsers(e){
				this.spList = e
			},
			// // 抄送人
			setCc(e){
				this.csList = e
			},
			closeUser(index,type) {
				if(this[type].length>this.showLength){
					this[type].splice(index+this[type].length-this.showLength,1)
				}else{
					this[type].splice(index,1)
				}
			},
			async getUsersByNames(names,listName){
				const { data } = await listByNames(names);
				if(data.code == 200){
					if(listName == 'csList'){
						this.csList = data.data
					}
					if(listName == 'spList'){
						this.spList = data.data
					}
				}
			},
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
	
	.submit{
		background-color: #0081FF;
		color: #f6f6f6;
		height: 100rpx;
		text-align: center;
	}
	
	.card-plus {
		display: inline-block;
		float: right;
		margin: 0 10rpx;
	}
	
	.plus-style {
		border: 1rpx solid #ededed;
		padding: 15rpx;
		margin: 0 10rpx 10rpx 0;
		position: relative;
		height: 40rpx;
		/* height: 15rpx; */
		border-radius: 15rpx;
	}
	
	.span-style {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		color: red;
		font-size: 50rpx;
		width: 20rpx;
		height: 20rpx;
		line-height: 35rpx;
		text-align: center;
	}
	
	.u-text__value {
		color: white !important;
	}
	
	
	.pers-list {
		display: flex;
		flex-direction: row;
		justify-content: right;
	}
	
	.per-list {
		margin-right: 50rpx;
	}
	
	.card-plus-t {
		display: flex;
		/* flex-direction: row-reverse; */
		/* justify-content: right; */
		text-align: center;
	}
	
	.user-t {
		margin: 15rpx 0 10rpx 0;
	}
	
	.cc-t {
		margin: 10rpx 0 15rpx 0;
	}
	
	.image_bottom_text{
		margin-top: 5rpx;
	}
	
	.pers-name {
		color: #a5a5a5;
		font-size: 25rpx;
		/* width: 50rpx; */
	}
	
	.pers-close {
		background-color: rgb(198, 199, 203);
		width: 18rpx;
		height: 18rpx;
		border-radius: 18rpx;
		padding: 5rpx;
		position: absolute;
		margin-top: -80rpx;
		margin-left: 55rpx;
	}
	
	.pers-icon {
		position: relative;
		top: -80rpx;
		left: 88rpx;
		width: 26rpx;
	}
	
	.all-users {
		left: -10%;
		top: 5rpx;
		position: relative;
	}
	
	.per-all {
		margin-right: 22rpx;
	}

</style>